<template>
	<view class="container">
		<cu-nav-bar @clickItem="clickItem" class="cu-nav-bar-box" :defaultActive="defaultActive"
			:barList="barList"></cu-nav-bar>

		<scroll-view class="content-list" :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="content-wrap">
				<view class="item-box" v-for="item in list" :key="item.id">
					<view class="left">
						<template v-if="defaultActive == 1">
							<image class="img-avatar" :src="item.by_user_avatar" mode=""></image>
							<view class="info">
								<view class="name">
									{{item.by_nick_name}}
								</view>
								<view class="message">
									关注了你
								</view>
								<view class="date-time" v-if="item.created_time">
									{{item.created_time.split(" ")[0]}}
								</view>
							</view>
						</template>
						<template v-else>
							<image class="img-avatar" :src="item.user_avatar" mode=""></image>
							<view class="info">
								<view class="name">
									{{item.nick_name}}
								</view>
								<view class="message">
									关注了你
								</view>
								<view class="date-time" v-if="item.created_time">
									{{item.created_time.split(" ")[0]}}
								</view>
							</view>
						</template>
					</view>
					<view class="right">
						<u-button v-if="defaultActive == 1 && !item.is_each" shape="circle"
							:customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}" type="primary" text="已关注"
							@click="onInterest(item)"></u-button>
						<u-button v-else-if="defaultActive == 2 && !item.is_each" shape="circle"
							:customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}" type="primary" text="回关"
							@click="onInterest(item)"></u-button>
						<u-button v-else shape="circle" :customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}"
							type="primary" text="互相关注" @click="onInterest(item)"></u-button>

					</view>
				</view>
				<cu-empty tips="暂时没有数据~" v-if="list && list.length == 0"></cu-empty>
				<u-loadmore v-else :status="status" />
			</view>

		</scroll-view>
		<view>
			<u-modal :show="modalShow" @confirm="onConfirm" @cancel="onCancel" cancelText="取消" :showCancelButton="true">
				<view class="slot-content">
					<view class="modal-content">
						确定{{ ['不在关注','不在关注','回关'][defaultActive]}}此人？
					</view>
				</view>
			</u-modal>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				status: 'loadmore',
				modalShow: false,
				list: null,
				defaultActive: 1,
				barList: [{
						label: '朋友',
						id: 0
					},
					{
						label: '关注',
						id: 1
					},
					{
						label: '粉丝',
						id: 2
					},
				],
			}
		},
		onLoad() {
			this.clickItem(1)
		},
		methods: {
			load_user_list_friend() {
				this.status = 'loading';
				this.$Net.get(this.$api.user_list_friend, {
					page: 1,
					limit: 99
				}).then(res => {
					this.status = 'nomore';
					this.list = res.list;
				}).catch(() => {
					this.status = 'nomore';
				})
			},
			load_user_list_atten() {
				this.status = 'loading';
				this.$Net.get(this.$api.user_list_atten, {
					page: 1,
					limit: 99
				}).then(res => {
					this.status = 'nomore';
					this.list = res.list;
				}).catch(() => {
					this.status = 'nomore';
				})
			},
			// 我的粉丝
			loadUserListAtten() {
				this.status = 'loading';
				this.$Net.get(this.$api.user_list_fans, {
					page: 1,
					limit: 99
				}).then(res => {
					this.status = 'nomore';
					this.list = res.list;
				}).catch(() => {
					this.status = 'nomore';
				})
			},
			loadList() {
				this.list = null;
				if (this.defaultActive == 2) {
					this.loadUserListAtten();
				} else if (this.defaultActive == 1) {
					this.load_user_list_atten();
				} else {
					this.load_user_list_friend();
				}
			},
			clickItem(e) {
				this.defaultActive = e;
				this.loadList();
			},
			onConfirm() {
				let id = ''
				if(this.defaultActive == 2){
					id = this.selData.created_uid
					// 回关
				}else{
					id = this.selData.uid
				}
				// 关注 取消关注
				this.$Net.get(this.$api.user_atten + "/" + id, {

				}, 1).then(res => {
					this.loadList();
				}).catch(() => {

				})

				this.modalShow = false;
			},
			onCancel() {
				this.modalShow = false;
			},
			onInterest(item) {
				this.selData = item;
				this.modalShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.content-list {
			flex: 1;
			overflow: hidden;

			.content-wrap {
				padding-bottom: 40rpx;
				padding-bottom: calc(40rpx + constant(safe-area-inset-top));
				padding-bottom: calc(40rpx + env(safe-area-inset-top));
			}

			.item-box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.left {
					display: flex;

					.img-avatar {
						width: 72rpx;
						height: 72rpx;
						margin-right: 14rpx;
						border-radius: 50%;
					}

					.name {
						color: rgba(0, 0, 0, 0.40);
						font-family: "PingFang SC";
						font-size: 28rpx;
					}

					.message {
						color: rgba(0, 0, 0, 0.80);
						font-family: "PingFang SC";
						font-size: 32rpx;
						margin-top: 6rpx;
						margin-bottom: 10rpx;
					}

					.date-time {
						color: rgba(0, 0, 0, 0.40);
						font-family: "PingFang SC";
						font-size: 28rpx;
						font-weight: 400;

					}
				}

			}
		}

		.modal-content {
			color: #353535;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 34rpx;
			font-weight: 400;
			padding: 40rpx 0;
		}

		::v-deep .u-popup__content {
			border-radius: 20px !important;
		}
	}
</style>